<template>
  <div class="my-order">
    <div class="action">
      <ul class="list" v-if="orderGoods.waitPay?.length > 0">
        <WaitPayView v-for="(item) in orderGoods.waitPay" :key="item.paySn" :item="item" />
      </ul>

      <ul class="list" v-if="orderGoods.waitSend?.length > 0">
        <li v-for="(item, index) in orderGoods.waitSend" :key="index">
          <div class="title">
            <div class="left">
              <img src="	https://image-mall.gxptkc.com/m/resources/goods_detail/store_logo.png" alt="" />
              <p>快车超市电商交易平台</p>
            </div>
            <span>待发货</span>
          </div>
          <ul class="order">
            <li v-for="(good, index) in item.goodsInfo" :key="index" @click="
              $router.push({
                path: '/product',
                query: { goodsId: good.goodsId, productId: good.productId },
              })
            ">
              <img :src="good.image" alt="" />
              <div class="right">
                <p>{{ good.goodsName }}</p>
                <span>￥{{ good.price.toFixed(2) }}*{{ good.buyNum }}</span>
                <span>{{ good.specValues }}</span>
              </div>
            </li>
          </ul>
          <div class="total">
            <div class="price">
              <span>共{{ item.goodsInfo?.length }}件商品</span>
              <span>合计：</span>
              <span>￥{{ item.total }}</span>
            </div>
            <div class="my-action">
              <span @click="confirmPayToCancel(item)">取消订单</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <EmptyView v-if="
      (orderGoods.waitPay?.length == 0 && !orderGoods.waitPay) ||
      (orderGoods.waitSend?.length == 0 && !orderGoods.waitSend) ||
      (orderGoods.waitPay?.length == 0 && orderGoods.waitSend?.length == 0)
    " />
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import EmptyView from "@/components/EmptyView.vue";
import WaitPayView from "@/components/WaitPayView.vue";
import { Dialog, Toast } from "vant";

import Vue from "vue";
import { CountDown } from "vant";

Vue.use(CountDown);
export default {
  components: {
    EmptyView,
    WaitPayView
  },
  data() {
    return {
      token: null,
      allOrder: [],
      waitPayOrder: [],
      waitSendOrder: [],

      arr: {},
    };
  },
  computed: {
    ...mapState(["orderType", "orderGoods"]),
  },
  watch: {
    orderType(newVal) {
      //监听当前类别是否变化来加载数据
      if (newVal == "") {
        this.waitSendOrder = JSON.parse(localStorage.getItem("confirm-pay"));
        this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
      } else if (newVal == "waitPay") {
        this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
        this.waitSendOrder = "";
      } else if (newVal == "waitSend") {
        this.waitPayOrder = "";
        this.waitSendOrder = JSON.parse(localStorage.getItem("confirm-pay"));
      } else if (newVal == "waitReceipt") {
        this.waitPayOrder = "";
        this.waitSendOrder = "";
      } else if (newVal == "waitEvaluate") {
        this.waitPayOrder = "";
        this.waitSendOrder = "";
      }

      this.changeOrderGoods({
        waitPay: this.waitPayOrder,
        waitSend: this.waitSendOrder,
      });
    },
  },
  destroyed() {
    clearInterval(this.id);
  },
  methods: {
    ...mapMutations(["changeOrderGoods"]),
    //删除一个待付款商品函数
    waitPayToCancle(item) {
      let currentOrder = JSON.parse(localStorage.getItem("wait-pay"));
      currentOrder = currentOrder.filter((o) => o.paySn != item.paySn);
      localStorage.setItem("wait-pay", JSON.stringify(currentOrder));

      this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
    },
    //待发货商品的取消函数
    confirmPayToCancel(item) {
      Dialog.confirm({
        title: "取消订单",
        message: "是否确认取消订单",
      })
        .then(() => {
          let currentOrder = JSON.parse(localStorage.getItem("confirm-pay"));
          currentOrder = currentOrder.filter((o) => o.paySn != item.paySn);
          localStorage.setItem("confirm-pay", JSON.stringify(currentOrder));

          this.changeOrderGoods({
            waitPay: "",
            waitSend: currentOrder,
          });
          Toast.success("取消订单成功！");
        })
        .catch(() => { });
    },

    //待付款商品的取消和支付函数
    waitPayToCancelOrToPay(item, type) {
      if (type == "pay") {
        //去支付
        Dialog.confirm({
          title: "支付订单",
          message: "是否确认支付订单",
        })
          .then(() => {
            //在待付款列表删除该数据
            this.waitPayToCancle(item);
            //在待发货列表添加该数据
            let currentConfirmPayOrder = JSON.parse(
              localStorage.getItem("confirm-pay")
            );
            localStorage.setItem(
              "confirm-pay",
              JSON.stringify([item, ...currentConfirmPayOrder])
            );

            if (this.orderType == "") {
              //如果当前页面时全部，就需要加载全部本地数据
              this.waitSendOrder = JSON.parse(
                localStorage.getItem("confirm-pay")
              );
              this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
            } else {
              //如果当前页面是代付款，就需要加载待付款数据
              this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
            }
            Toast.success("支付订单成功！");
          })
          .catch(() => {
            // on cancel
          });
      } else {
        //去删除
        Dialog.confirm({
          title: "取消订单",
          message: "是否确认取消订单",
        })
          .then(() => {
            this.waitPayToCancle(item);
            Toast.success("取消订单成功！");
          })
          .catch(() => { });
      }
    },
  },
  async created() {
    //初始应该加载哪个数据
    if (this.orderType == "") {
      this.waitSendOrder = JSON.parse(localStorage.getItem("confirm-pay"));
      this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
    } else if (this.orderType == "waitPay") {
      this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));
      this.waitSendOrder = "";
    } else if (this.orderType == "waitSend") {
      this.waitSendOrder = JSON.parse(localStorage.getItem("confirm-pay"));
      this.waitPayOrder = "";
    } else {
      this.waitSendOrder = "";
      this.waitPayOrder = "";
    }
  },
};
</script>

<style lang="scss" scoped>
.action {
  background-color: rgb(245, 245, 245);

  ul.list {
    >li {
      background-color: #fff;
      font-size: 13rem;
      margin-bottom: 10rem;
      padding-left: 10rem;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rem 0;
        padding-right: 10rem;
        border-bottom: 1px solid #eee;

        .left {
          display: flex;
          justify-content: left;
          align-items: center;

          img {
            width: 15rem;
            height: 14rem;
          }

          p {
            color: #2d2d2d;
            margin-left: 5rem;
          }
        }

        span {
          color: #fc1c1c;
        }
      }

      ul.order {
        >li {
          display: flex;
          // margin-bottom: 10rem;
          padding: 10rem 0;
          border-bottom: 1px solid #eee;

          img {
            width: 100rem;
            height: 100rem;
            border-radius: 10rem;
          }

          .right {
            margin-left: 10rem;
            display: flex;
            flex-direction: column;
            padding-right: 10rem;

            p {
              font-size: 14rem;
              color: #2d2d2d;
              line-height: 1.5em;
            }

            span {
              color: #949494;

              &:last-child {
                font-size: 16rem;
                color: #2d2d2d;
              }
            }
          }
        }
      }

      .total {
        text-align: right;
        padding: 15rem 10rem;

        .price {
          span {
            color: #949494;

            &:nth-child(2) {
              color: #333;
              margin-left: 10rem;
            }

            &:last-child {
              font-size: 16rem;
              color: #2d2d2d;
            }
          }
        }

        .my-action {
          margin-top: 10rem;

          span {
            padding: 5rem;
            border-radius: 20rem;
            border: 1rem solid #eee;
            margin: 0 7rem;

            &:last-child {
              color: #fff;
              background-color: #fc1c1c;
              border: none;
            }
          }
        }
      }
    }
  }
}
</style>